<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
    <el-row>
      <el-col :span="24">
        <el-form-item label="父菜单" prop="parentId">
          <el-cascader
            v-model="ruleForm.checkedNode"
            :options="options"
            placeholder="默认一级菜单"
            :props="{ checkStrictly: true, value:'id',label:'menuName',children:'child'}"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="ruleForm.menuName" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="ruleForm.menuType" @input="switchMenuType">
            <el-radio v-for="(item) in menuType" :key="item.id" :label="item.id">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="hidden">
      <el-col :span="12">
        <el-form-item label="菜单图标" prop="icon">
          <e-icon-picker v-model="ruleForm.icon" :high-light-color="icon.highLightColor" :options="icon.options" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="路由名称" prop="routeName">
          <el-input v-model="ruleForm.routeName" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="hidden">
      <el-col :span="12">
        <el-form-item label="路由路径" prop="menuRoute">
          <el-input v-model="ruleForm.routePath" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="ruleForm.componentPath" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="hidden">
      <el-col :span="12">
        <el-form-item label="是否隐藏" prop="isHidden">
          <el-radio-group v-model="ruleForm.isHidden">
            <el-radio :label="true">隐藏</el-radio>
            <el-radio :label="false">不隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否固定" prop="isAffix">
          <el-radio-group v-model="ruleForm.isAffix">
            <el-radio :label="true">固定</el-radio>
            <el-radio :label="false">不固定</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="hidden">
      <el-col :span="24">
        <el-form-item label="重定向" prop="redirect">
          <el-input v-model="ruleForm.redirect" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="!hidden">
      <el-col :span="24">
        <el-form-item label="权限标识" prop="permission">
          <el-input v-model="ruleForm.permission" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-col :span="24">
      <el-form-item label="菜单备注">
        <el-input v-model="ruleForm.remark" type="textarea" :rows="3" />
      </el-form-item>
    </el-col>
  </el-form>
</template>

<script>
import { GetTreeNodes, creatrMenu } from '@/api/menu'
export default {
  name: 'VueElementAdminIndex',
  props: {
    menuType: {
      type: Array,
      default: () => {}
    }
  },

  data() {
    return {
      ruleForm: {
        menuType: 1,
        menuName: '',
        apiPath: '',
        routeName: '',
        routePath: '',
        componentPath: 'Layout',
        redirect: '',
        isHidden: false,
        icon: '',
        parentId: '',
        isAffix: false,
        permission: '',
        httpMethod: '',
        checkedNode: []
      },
      rules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        menuType: [
          { required: true, message: '请选择菜单类型', trigger: 'blur' }
        ]
      },
      options: [],
      hidden: true,
      icon: {
        highLightColor: '#fc1944',
        options: { FontAwesome: true, ElementUI: true }
      }
    }
  },
  mounted() {
    this.loadData()
  },

  methods: {
    loadData() {
      GetTreeNodes().then(m => {
        this.options = m.data
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.parentId = this.ruleForm.checkedNode.slice(-1)[0]
          var _this = this
          creatrMenu(this.ruleForm).then(res => {
            this.$message({
              message: res.message,
              type: 'success',
              onClose: function() {
                _this.$emit('success')
              }
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    switchMenuType(menuType) {
      this.ruleForm.componentPath = menuType === 1 ? 'Layout' : ''
      this.hidden = menuType !== 3
    }
  }
}
</script>

<style>
    .el-cascader-menu__wrap {
        height: 304px;
    }

    .el-cascader {
        width: 100%;
    }
</style>
